<!--
  文件名：divided-tree.html
  功能：以树状图展示“旗舰店分账主协议”及其分支与叶子收款人结构。
  使用场景：静态预览分账关系；后续可对接后台接口动态生成。
  H5约束：当前页面无后台调用；若接入接口，必须以返回值 code==0 作为成功。
  作者：AI助手
-->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>分账树状图 | 旗舰店分账主协议（AGR-ROOT-001）</title>
    <style>
      /*
        文件级样式注释：
        - 页面采用响应式布局，居中显示树图；
        - 提供浅色主题基础样式，适配 Mermaid 默认主题。
      */
      :root {
        color-scheme: light dark;
        --bg: #f7f8fa;
        --fg: #1f2328;
        --muted: #6e7781;
        --card: #ffffff;
        --border: #e5e7eb;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #0b0e12;
          --fg: #e6edf3;
          --muted: #9da7b1;
          --card: #11161c;
          --border: #1f2a37;
        }
      }
      html, body {
        margin: 0;
        padding: 0;
        background: var(--bg);
        color: var(--fg);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      }
      header {
        max-width: 1200px;
        margin: 24px auto 0;
        padding: 0 16px;
      }
      h1 {
        font-size: 22px;
        margin: 0 0 6px;
      }
      .subtitle {
        font-size: 13px;
        color: var(--muted);
      }
      .card {
        max-width: 1200px;
        margin: 16px auto;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      }
      .card .toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
      }
      .card .toolbar .note {
        font-size: 12px;
        color: var(--muted);
      }
      .card .toolbar .actions button {
        appearance: none;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--fg);
        border-radius: 6px;
        padding: 6px 10px;
        font-size: 12px;
        cursor: pointer;
      }
      .card .toolbar .actions button:hover { opacity: 0.9; }
      .graph-wrap {
        padding: 12px 8px 16px;
        overflow: auto;
      }
      /* Mermaid SVG在深色模式下的可读性优化 */
      .graph-wrap svg { max-width: 100%; height: auto; }
    </style>
  </head>
  <body>
    <header>
      <h1>分账树状图</h1>
      <div class="subtitle">主协议：AGR-ROOT-001；陈炼链：AGR-SHL-002/003/004；小郑链：AGR-XZ-012/013/014/015</div>
    </header>

    <section class="card">
      <div class="toolbar">
        <div class="note">说明：叶子节点为最终收款人；主账号入账到可提现，非主账号入账到未结算。</div>
        <div class="actions">
          <button id="btn-refresh" type="button">刷新渲染</button>
        </div>
      </div>
      <div id="graph" class="graph-wrap" aria-label="分账树图容器"></div>
    </section>

    <!-- 引入 Mermaid 图形渲染库（CDN） -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
    <script>
      /**
       * 类级注释：DividedTreePage
       * 职责：管理分账树状图的构建、渲染与用户交互。
       * 说明：当前实现使用 Mermaid 渲染静态结构；如需对接后端，请在调用接口时遵循 code==0 才算成功的约定。
       */
      class DividedTreePage {
        /**
         * 构造函数
         * @param {Object} options - 页面初始化配置参数。
         * @param {string} options.selector - 图容器的CSS选择器。
         * @returns {DividedTreePage} 返回页面实例。
         * @throws {Error} 当找不到容器元素时抛出异常。
         */
        constructor(options) {
          this.selector = options && options.selector ? options.selector : '#graph';
          this.$el = document.querySelector(this.selector);
          if (!this.$el) {
            throw new Error('未找到图容器元素：' + this.selector);
          }
        }

        /**
         * 初始化Mermaid配置
         * @returns {void} 无返回值。
         * @throws {Error} 初始化过程中发生错误时抛出异常。
         */
        initMermaid() {
          try {
            mermaid.initialize({ startOnLoad: false, theme: 'default' });
          } catch (err) {
            console.error('Mermaid 初始化失败', err);
            throw err;
          }
        }

        /**
         * 构建树状图定义（Mermaid DSL）
         * @returns {string} 返回Mermaid图定义字符串。
         * @exception Error 若构建失败则抛出异常。
         */
        buildGraphDefinition() {
          try {
            // 说明：使用正式协议命名与编号；比例采用边标签 |xx%|；叶子节点标注“最终比例”（连乘结果，百分比/小数）。
            return `flowchart TB
        R[主协议：旗舰店分账主协议（AGR-ROOT-001）\n主账号：雪莉]
R -->|15%| CL_root_leaf[雪莉（叶子，最终比例：15% / 0.15）]
        R -->|25%| SHL_2[子协议：陈炼渠道分配（二层）（AGR-SHL-002）]
R -->|60%| XZ_2[子协议：小郑渠道分配（二层）（AGR-XZ-012）]

        %% —— 分支一：陈炼链（至四层） ——
SHL_2 -->|60%| SHL_2_leaf[陈炼（叶子，最终比例：15% / 0.15）]
        SHL_2 -->|40%| SHL_3[子协议：陈炼渠道分配（三层）（AGR-SHL-003）]
SHL_3 -->|50%| SHL_3_dg[刀哥（叶子，最终比例：5% / 0.05）]
        SHL_3 -->|50%| SHL_4[子协议：陈炼渠道分配（四层）（AGR-SHL-004）]
SHL_4 -->|100%| SHL_4_sp[苏朋（叶子，最终比例：5% / 0.05）]

%% —— 分支二：小郑链（至五层） ——
XZ_2 -->|20%| XZ_2_leaf[小郑（叶子，最终比例：12% / 0.12）]
XZ_2 -->|80%| XZ_3[子协议：小郑渠道分配（三层）（AGR-XZ-013）]
XZ_3 -->|25%| XZ_3_cl[雪莉（叶子，最终比例：12% / 0.12）]
XZ_3 -->|75%| XZ_4[子协议：小郑渠道分配（四层）（AGR-XZ-014）]
XZ_4 -->|40%| XZ_4_shl[陈炼（叶子，最终比例：14.4% / 0.144）]
XZ_4 -->|60%| XZ_5[子协议：小郑渠道分配（五层）（AGR-XZ-015）]
XZ_5 -->|50%| XZ_5_dg[刀哥（叶子，最终比例：10.8% / 0.108）]
XZ_5 -->|50%| XZ_5_sp[苏朋（叶子，最终比例：10.8% / 0.108）]
`;
          } catch (err) {
            console.error('构建图定义失败', err);
            throw err;
          }
        }

        /**
         * 渲染树状图到页面容器
         * @param {string} definition - Mermaid图定义字符串。
         * @returns {Promise<void>} 无返回值的Promise。
         * @throws {Error} 当渲染失败时抛出异常。
         */
        async renderGraph(definition) {
          try {
            const { svg } = await mermaid.render('dividedTreeGraph', definition);
            this.$el.innerHTML = svg;
          } catch (err) {
            console.error('Mermaid 渲染失败', err);
            throw err;
          }
        }

        /**
         * 运行入口：初始化、构建并渲染
         * @returns {Promise<void>} 无返回值的Promise。
         * @throws {Error} 当任一阶段失败时抛出异常。
         */
        async run() {
          this.initMermaid();
          const def = this.buildGraphDefinition();
          await this.renderGraph(def);
          // 绑定交互
          const refreshBtn = document.querySelector('#btn-refresh');
          if (refreshBtn) {
            refreshBtn.addEventListener('click', async () => {
              try {
                await this.renderGraph(this.buildGraphDefinition());
              } catch (err) {
                alert('刷新渲染失败，请查看控制台日志');
              }
            });
          }
        }
      }

      /**
       * 页面自调用入口（IIFE）
       * @returns {Promise<void>} 无返回值。
       * @throws {Error} 当页面初始化或渲染失败时抛出异常。
       */
      (async () => {
        try {
          const page = new DividedTreePage({ selector: '#graph' });
          await page.run();
        } catch (err) {
          console.error('页面初始化失败', err);
          const el = document.querySelector('#graph');
          if (el) {
            el.innerHTML = '<div style="padding:12px;color:#dc2626">页面渲染失败，请检查控制台日志与网络连接。</div>';
          }
        }
      })();
    </script>
  </body>
</html>

